﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="no-js" lang="">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cirkle | 起始</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/static/media/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/icofont/icofont.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick-theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/magnific-popup/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/select2/css/select2.min.css" type="text/css">

    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/app.css">

    <!-- Google Web Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">

</head>

<body class="sticky-header">
    <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  	<![endif]-->
    <a href="#wrapper" data-type="section-switch" class="scrollup">
        <i class="icofont-bubble-up"></i>
    </a>
    <!-- Preloader Start Here -->
    <div id="preloader"></div>
    <!-- Preloader End Here -->
    <div id="wrapper" class="wrapper overflow-hidden">

        <!--=====================================-->
        <!--=          Header Menu Start       	=-->
        <!--=====================================-->
        <header class="header">
            <div id="rt-sticky-placeholder"></div>
            <div id="header-menu" class="header-menu menu-layout1">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-2">
                            <div class="temp-logo">
                                <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo.png" alt="Logo"></a>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-7 col-sm-7 col-8 d-flex justify-content-xl-start justify-content-center">
                            <div class="mobile-nav-item hide-on-desktop-menu">
                                <div class="mobile-toggler">
                                    <button type="button" class="mobile-menu-toggle">
                                        <i class="icofont-navigation-menu"></i>
                                    </button>
                                </div>
                                <div class="mobile-logo">
                                    <a href="${pageContext.request.contextPath}/Directory/index">
                                        <img src="${pageContext.request.contextPath}/static/media/mobile_logo.png" alt="Logo">
                                    </a>
                                </div>
                            </div>
                            <nav id="dropdown" class="template-main-menu">
                                <button type="button" class="mobile-menu-toggle mobile-toggle-close">
                                    <i class="icofont-close"></i>
                                </button>
                                <ul class="menu-content">
                                    <li class="header-nav-item">
                                        <a href="${pageContext.request.contextPath}/Directory/index" class="menu-link active">首页</a>
                                    </li>
                                    <li class="hide-on-mobile-menu">
                                        <a href="#" class="menu-link have-sub">社区</a>
                                        <ul class="mega-menu mega-menu-col-2">
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/newsfeed">新闻摘要</a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-timeline">配置文件时间线 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-about">简介关于 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-friends">

                                                            个人资料好友 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/ser-groups">

                                                            “配置文件”组 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-photo">

                                                            资料照片 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-video">个人资料视频</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/user-badges">侧面徽章</a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums">论坛</a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums-forum">

                                                            论坛主题 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums-timeline">

                                                            论坛时间表 </a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums-info">论坛信息</a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums-members">论坛成员</a>
                                                    </li>
                                                    <li>
                                                        <a href="${pageContext.request.contextPath}/Directory/forums-media">

                                                            论坛媒体 </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-nav-item hide-on-desktop-menu">
                                        <a href="#" class="menu-link have-sub">社区</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/newsfeed">新闻摘要</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-timeline">Profile Timeline</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-about">Profile About</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-friends">Profile Friends</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-groups">Profile Group</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-photo">Profile Photo</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-video">Profile Video</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-badges">Profile Badges</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums">Forums</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-forum">Forums Topic</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-timeline">Forums Timeline</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-info">Forums Info</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-members">Forums Members</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-media">Forums Media</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-nav-item">
                                        <a href="#" class="menu-link have-sub">博客</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-blog">博客网格</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/single-blog">
                                                    博客详细信息 </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-nav-item">
                                        <a href="#" class="menu-link have-sub">页数</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/about-us">关于</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/contact">联系我们</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-nav-item">
                                        <a href="#" class="menu-link have-sub">商店</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/gouwu">商店</a>
                                            </li>
                                            <li>
                                                <a href="single-${pageContext.request.contextPath}/Directory/shop">
                                                    店铺详情 </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-nav-item">
                                        <a href="${pageContext.request.contextPath}/Directory/contact" class="menu-link">联系我们</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-xl-4 col-lg-3 col-sm-5 col-4 d-flex justify-content-end">
                            <div class="header-action">
                                <ul>
                                    <li class="header-social">
                                        <a href="#"><i class="icofont-facebook"></i></a>
                                        <a href="#"><i class="icofont-twitter"></i></a>
                                        <a href="#"><i class="icofont-linkedin"></i></a>
                                        <a href="#"><i class="icofont-pinterest"></i></a>
                                        <a href="#"><i class="icofont-skype"></i></a>
                                    </li>
                                    <li class="header-search-icon">
                                        <a href="#header-search" title="Search"><i class="icofont-search"></i></a>
                                    </li>
                                    <li class="login-btn">
                                        <a href="${pageContext.request.contextPath}/Directory/login" class="item-btn"><i class="fas fa-user"></i>登录</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!--=====================================-->
        <!--=          Banner Start       		=-->
        <!--=====================================-->
        <section class="hero-banner">
            <div class="container">
                <div class="hero-content" data-sal="zoom-out" data-sal-duration="1000">
                    <h1 class="item-title">Cirkle社区</h1>
                    <p>有真正的社会联系有时会很困难很有趣，一切都会变得简单得多!</p>
                    <div class="item-number">10,95,219</div>
                    <div class="conn-people">连接人数/加入人数</div>
                    <a href="${pageContext.request.contextPath}/Directory/login" class="button-slide">
                        <span class="btn-text">发现现在/现在就发现</span>
                        <span class="btn-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            <div class="leftside-image">
                <div class="cartoon-image" data-sal="slide-down" data-sal-duration="1000" data-sal-delay="100">
                    <img src="${pageContext.request.contextPath}/static/media/banner/people_1.png" alt="People">
                </div>
                <div class="shape-image" data-sal="slide-down" data-sal-duration="500" data-sal-delay="700">
                    <img src="${pageContext.request.contextPath}/static/media/banner/shape_1.png" alt="shape">
                </div>
            </div>
            <div class="map-line">
                <img src="${pageContext.request.contextPath}/static/media/banner/map_line.png" alt="map" data-sal="slide-up" data-sal-duration="500" data-sal-delay="800">
                <ul class="map-marker">
                    <li data-sal="slide-up" data-sal-duration="700" data-sal-delay="1000"><img src="${pageContext.request.contextPath}/static/media/banner/marker_1.png" alt="marker"></li>
                    <li data-sal="slide-up" data-sal-duration="800" data-sal-delay="1000"><img src="${pageContext.request.contextPath}/static/media/banner/marker_2.png" alt="marker"></li>
                    <li data-sal="slide-up" data-sal-duration="900" data-sal-delay="1000"><img src="${pageContext.request.contextPath}/static/media/banner/marker_3.png" alt="marker"></li>
                    <li data-sal="slide-up" data-sal-duration="1000" data-sal-delay="1000"><img src="${pageContext.request.contextPath}/static/media/banner/marker_4.png" alt="marker"></li>
                </ul>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Why Choose Start       	=-->
        <!--=====================================-->
        <section class="why-choose-us">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="why-choose-box">
                            <div class="item-subtitle">我们做什么</div>
                            <h2 class="item-title"><span>为什么加入我们</span> 从社交网络中闲逛?</h2>
                            <p>社交母鸡一名不知名的印刷工拿了一大堆铅字，拼成了铅字样书。 它不仅存在了5个世纪，而且飞跃到电子排版，保持本质不变，随着发行而普及。</p>
                            <a href="${pageContext.request.contextPath}/Directory/login" class="button-slide">
                                <span class="btn-text">加入我们的社团</span>
                                <span class="btn-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                        <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="why-choose-box">
                            <ul class="features-list">
                                <li>
                                    <div class="media">
                                        <div class="item-icon">
                                            <i class="icofont-wechat"></i>
                                        </div>
                                        <div class="media-body">
                                            <h3 class="item-title">伟大的人见面</h3>
                                            <p>当一个不知名的印刷工把它打乱一大堆来做一个模式标本时，它不仅幸存了下来。</p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="media">
                                        <div class="item-icon">
                                            <i class="icofont-users"></i>
                                        </div>
                                        <div class="media-body">
                                            <h3 class="item-title">论坛事务</h3>
                                            <p>当一个不知名的印刷工把它打乱一大堆来做一个模式标本时，它不仅幸存了下来。</p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="media">
                                        <div class="item-icon">
                                            <i class="icofont-paper"></i>
                                        </div>
                                        <div class="media-body">
                                            <h3 class="item-title">活动小组</h3>
                                            <p>当一个不知名的印刷工把它打乱一大堆来做一个模式标本时，它不仅幸存了下来。</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Community Start       	=-->
        <!--=====================================-->
        <section class="community-network">
            <ul class="map-marker">
                <li><img src="${pageContext.request.contextPath}/static/media/banner/marker_1.png" alt="marker"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/banner/marker_2.png" alt="marker"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/banner/marker_3.png" alt="marker"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/banner/marker_4.png" alt="marker"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/banner/marker_5.png" alt="marker"></li>
            </ul>
            <div class="container">
                <div class="row justify-content-end">
                    <div class="col-lg-6">
                        <div class="community-content">
                            <h2 class="item-title">129 Countries We Build Our Largest Community in <span>Cirkle Network</span></h2>
                            <p>一个不知名的印刷工拿了一大堆铅字，把它打乱，做成铅字样书。 它不仅存在了五个世纪，而且飞跃了电子排字，基本保留下来。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-shape" data-sal="slide-left" data-sal-duration="500" data-sal-delay="500">
                <img src="${pageContext.request.contextPath}/static/media/figure/shape_7.png" alt="bg">
            </div>
        </section>
        <!--=====================================-->
        <!--=         Team Area  Start       	=-->
        <!--=====================================-->
        <section class="section team-circle">
            <div class="container position-relative">
                <div class="section-heading">
                    <h2 class="item-title">我们的活跃成员</h2>
                    <p>当一个不知名的印刷工拿了一大堆铅字，把它打乱，就拼成了一本铅字样书。</p>
                </div>
                <div class="row justify-content-center">
                    <div class="col-xl-11">
                        <div class="row no-gutters">
                            <div class="col-lg-4 col-sm-6">
                                <ul class="nav nav-tabs nav-tabs-left" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#team1" role="tab" aria-selected="true">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_1.jpg" alt="team">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#team2" role="tab" aria-selected="false">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_5.jpg" alt="team">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#team3" role="tab" aria-selected="false">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_6.jpg" alt="team">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-4 col-sm-6 order-lg-3">
                                <ul class="nav nav-tabs nav-tabs-right" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#team4" role="tab" aria-selected="false">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_3.jpg" alt="team">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#team5" role="tab" aria-selected="false">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_4.jpg" alt="team">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#team6" role="tab" aria-selected="false">
                                            <img src="${pageContext.request.contextPath}/static/media/team/team_7.jpg" alt="team">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-4 order-lg-2">
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="team1" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_1.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">凯蒂里约热内卢</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="team2" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_5.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">约翰逊约翰</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="team3" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_6.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">法希姆•拉赫曼</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="team4" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_3.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">Mamunur拉希德</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="team5" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_4.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">凯蒂里约热内卢</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="team6" role="tabpanel">
                                        <div class="team-box">
                                            <div class="item-img">
                                                <img src="${pageContext.request.contextPath}/static/media/team/team_7.jpg" alt="team">
                                            </div>
                                            <div class="item-content">
                                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-timeline">凯蒂里约热内卢</a></h3>
                                                <div class="group-count"><span>25</span> - 时尚</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="shape-wrap">
                            <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_9.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_1.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_2.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_circle_1.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_circle_2.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_circle_3.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_3.png" alt="shape"></li>
                            <li><img src="${pageContext.request.contextPath}/static/media/team/shape_4.png" alt="shape"></li>
                        </ul>
                    </div>
                </div>
                <div class="see-all-btn">
                    <a href="${pageContext.request.contextPath}/Directory/forums-members" class="button-slide">
                        <span class="btn-text">发现所有成员</span>
                        <span class="btn-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Why Choose  Start       	=-->
        <!--=====================================-->
        <section class="why-choose-fluid">
            <div class="container-fluid full-width">
                <div class="row no-gutters">
                    <div class="col-lg-6">
                        <div class="why-choose-content">
                            <div class="content-box">
                                <h2 class="item-title">Cirkle使你的生活更容易和简单</h2>
                                <p>在你的生命中，你的生命是永恒的。所以不要用未知的方式拼凑你的生活。</p>
                                <a href="${pageContext.request.contextPath}/Directory/about-us" class="button-slide">
                                    <span class="btn-text">查看全文</span>
                                    <span class="btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                            <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                                        </svg>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="why-choose-img">
                            <div class="image-box">
                                <img src="${pageContext.request.contextPath}/static/media/figure/why_choose_1.jpg" alt="image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Location Find Start       =-->
        <!--=====================================-->
        <section class="section location-find">
            <div class="container">
                <div class="section-heading">
                    <h2 class="heading-title">发现身边的人</h2>
                    <p>当一个不知名的印刷工拿了一大堆铅字，把它打乱，就拼成了一本铅字样书。 </p>
                </div>
                <div class="row gutters-20">
                    <div class="col-lg-6">
                        <div class="location-box">
                            <div class="item-img">
                                <a href="${pageContext.request.contextPath}/Directory/user-friends">
                                    <img src="${pageContext.request.contextPath}/static/media/location/location_1.jpg" alt="纽约市">
                                </a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-friends">纽约市</a></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row gutters-20">
                            <div class="col-sm-6">
                                <div class="location-box">
                                    <div class="item-img">
                                        <a href="${pageContext.request.contextPath}/Directory/user-friends">
                                            <img src="${pageContext.request.contextPath}/static/media/location/location_2.jpg" alt="纽约市">
                                        </a>
                                    </div>
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-friends">波士顿</a></h3>
                                    </div>
                                </div>
                                <div class="location-box">
                                    <div class="item-img">
                                        <a href="${pageContext.request.contextPath}/Directory/ser-friends">
                                            <img src="${pageContext.request.contextPath}/static/media/location/location_3.jpg" alt="纽约市">
                                        </a>
                                    </div>
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-friends">加利福尼亚</a></h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="location-box">
                                    <div class="item-img">
                                        <a href="${pageContext.request.contextPath}/Directory/user-friends">
                                            <img src="${pageContext.request.contextPath}/static/media/location/location_2.jpg" alt="纽约市">
                                        </a>
                                    </div>
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-friends">Kancas City</a></h3>
                                    </div>
                                </div>
                                <div class="location-box">
                                    <div class="item-img">
                                        <a href="${pageContext.request.contextPath}/Directory/user-friends">
                                            <img src="${pageContext.request.contextPath}/static/media/location/location_4.jpg" alt="纽约市">
                                        </a>
                                    </div>
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-friends">洛杉矶</a></h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Banner Apps  Start       	=-->
        <!--=====================================-->
        <section class="banner-apps">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 d-flex align-items-center">
                        <div class="banner-content">
                            <h2 class="item-title">完全响应Cirkle 博客主题</h2>
                            <p>我为你祈祷，为你祈祷，为你祈祷，为你祈祷。我有一个小小的生命，我有一个实习的机会。</p>
                            <a href="https://themeforest.net/user/radiustheme/portfolio" class="button-slide">
                                <span class="btn-text">现在响应</span>
                                <span class="btn-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                        <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner-img">
                            <div class="apps-view">
                                <img src="${pageContext.request.contextPath}/static/media/banner/apps.png" alt="Apps">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Groups Area  Start       	=-->
        <!--=====================================-->
        <section class="section groups-popular">
            <div class="container">
                <div class="section-heading">
                    <h2 class="heading-title">最受欢迎的团体</h2>
                    <p>当一个不知名的印刷工拿了一大堆铅字，把它打乱，就拼成了一本铅字样书。 </p>
                </div>
                <div class="row gutters-15 justify-content-center">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_1.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">摄影</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_2.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">早餐</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_3.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">冒险</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_4.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">饭店</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_5.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">游戏</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_6.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">纹身</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_7.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">音乐</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="groups-box">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/media/groups/groups_8.jpg" alt="Groups">
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="${pageContext.request.contextPath}/Directory/user-single-group">运动</a></h3>
                                <div class="groups-member">11250个成员</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="see-all-btn">
                    <a href="${pageContext.request.contextPath}/Directory/user-groups" class="button-slide">
                        <span class="btn-text">查看所有组</span>
                        <span class="btn-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=         Testimonial Start       	=-->
        <!--=====================================-->
        <section class="testimonial-carousel">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="testimonial-box">
                            <div class="slick-carousel slick-slider" data-slick='{"arrows": false, "slidesToShow": 1,  "fade": true, "asNavFor": ".slick-nav"}'>
                                <div class="slick-slide">
                                    <div class="testimonial-content">
                                        <h3 class="item-title">Zinia Jessy</h3>
                                        <div class="item-subtitle">CEO, Khadai R Ghumai</div>
                                        <p>" Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor utlabore et dolore magna aliqua enim miniectetur adipisicing eliteiusmod dolore magna aliqua Ut enim ad minim veniam."</p>
                                    </div>
                                </div>
                                <div class="slick-slide">
                                    <div class="testimonial-content">
                                        <h3 class="item-title">法希姆•拉赫曼</h3>
                                        <div class="item-subtitle">CEO, Khadai R Ghumai</div>
                                        <p>" Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor utlabore et dolore magna aliqua enim miniectetur adipisicing eliteiusmod dolore magna aliqua Ut enim ad minim veniam."</p>
                                    </div>
                                </div>
                                <div class="slick-slide">
                                    <div class="testimonial-content">
                                        <h3 class="item-title">Tasfiq Al Rashid</h3>
                                        <div class="item-subtitle">CEO, Khadai R Ghumai</div>
                                        <p>" Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor utlabore et dolore magna aliqua enim miniectetur adipisicing eliteiusmod dolore magna aliqua Ut enim ad minim veniam."</p>
                                    </div>
                                </div>
                                <div class="slick-slide">
                                    <div class="testimonial-content">
                                        <h3 class="item-title">Mamunur Rahman</h3>
                                        <div class="item-subtitle">CEO, Khadai R Ghumai</div>
                                        <p>" Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor utlabore et dolore magna aliqua enim miniectetur adipisicing eliteiusmod dolore magna aliqua Ut enim ad minim veniam."</p>
                                    </div>
                                </div>
                            </div>
                            <div class="slick-nav slick-carousel" data-slick='{"arrows": false, "slidesToShow": 3, "centerMode": true, "asNavFor": ".slick-slider", "focusOnSelect": true}'>
                                <div class="nav-item">
                                    <img src="${pageContext.request.contextPath}/static/media/testimonial/nav_1.jpg" alt="Product">
                                </div>
                                <div class="nav-item">
                                    <img src="${pageContext.request.contextPath}/static/media/testimonial/nav_2.jpg" alt="Product">
                                </div>
                                <div class="nav-item">
                                    <img src="${pageContext.request.contextPath}/static/media/testimonial/nav_3.jpg" alt="Product">
                                </div>
                                <div class="nav-item">
                                    <img src="${pageContext.request.contextPath}/static/media/testimonial/nav_1.jpg" alt="Product">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="shape-wrap">
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_4.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_8.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_2.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_9.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_10.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_11.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_8.png" alt="shape"></li>
            </ul>
        </section>
        <!--=====================================-->
        <!--=         Blog Area Start       	=-->
        <!--=====================================-->
        <section class="section blog-grid">
            <div class="container">
                <div class="section-heading flex-heading">
                    <div class="row">
                        <div class="col-lg-5">
                            <h2 class="heading-title">Discover Our Awesome Blogs &amp; Stories</h2>
                        </div>
                        <div class="col-lg-7">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elitsed do eiusmod tempor utlabore et dolore magna aliqua enim miniectetur adipisicing eliteiusmod dolore magna aliqua Ut enim ad minim veniam.</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="blog-box">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/single-blog">
                                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_1.jpg" alt="Blog">
                                </a>
                                <div class="blog-date"><i class="icofont-calendar"></i>24 Jun</div>
                            </div>
                            <div class="blog-content">
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/single-blog">Our 10 Steps to successful video for blogging & Challanging</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="icofont-ui-user"></i>by <a href="#">Admin</a></li>
                                    <li><i class="icofont-tag"></i><a href="#">Social</a>, <a href="#">Live</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="blog-box">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/single-blog">
                                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_2.jpg" alt="Blog">
                                </a>
                                <div class="blog-date"><i class="icofont-calendar"></i>22 Jun</div>
                            </div>
                            <div class="blog-content">
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/single-blog">Our 10 Steps to successful video for blogging & Challanging</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="icofont-ui-user"></i>by <a href="#">Admin</a></li>
                                    <li><i class="icofont-tag"></i><a href="#">Social</a>, <a href="#">Live</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="blog-box">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/single-blog">
                                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_3.jpg" alt="Blog">
                                </a>
                                <div class="blog-date"><i class="icofont-calendar"></i>20 Jun</div>
                            </div>
                            <div class="blog-content">
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/single-blog">Our 10 Steps to successful video for blogging & Challanging</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="icofont-ui-user"></i>by <a href="#">Admin</a></li>
                                    <li><i class="icofont-tag"></i><a href="#">Social</a>, <a href="#">Live</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=          NewsLetter Start       		=-->
        <!--=====================================-->
        <section class="banner-newsletter">
            <ul class="section-cloud">
                <li><img src="${pageContext.request.contextPath}/static/media/figure/cloud_1.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/cloud_2.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/cloud_2.png" alt="shape"></li>
                <li><img src="${pageContext.request.contextPath}/static/media/figure/cloud_1.png" alt="shape"></li>
            </ul>
            <div class="container">
                <ul class="section-shape">
                    <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_1.png" alt="shape"></li>
                    <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_2.png" alt="shape"></li>
                    <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_3.png" alt="shape"></li>
                    <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_4.png" alt="shape"></li>
                    <li><img src="${pageContext.request.contextPath}/static/media/figure/shape_5.png" alt="shape"></li>
                </ul>
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="newsletter-box">
                            <h2 class="item-title">Subscribe Cirkle Newsletter</h2>
                            <p>Subscribe to be the first one to know about updates, new features and much more! Enter your email</p>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Enter your e-mail">
                                <div class="input-group-append">
                                    <button class="button-slide" type="button">
                                        <span class="btn-text">Subscribe Now</span>
                                        <span class="btn-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="10px">
                                                <path fill-rule="evenodd" fill="#ffffff" d="M16.671,9.998 L12.997,9.998 L16.462,6.000 L5.000,6.000 L5.000,4.000 L16.462,4.000 L12.997,0.002 L16.671,0.002 L21.003,5.000 L16.671,9.998 ZM17.000,5.379 L17.328,5.000 L17.000,4.621 L17.000,5.379 ZM-0.000,4.000 L3.000,4.000 L3.000,6.000 L-0.000,6.000 L-0.000,4.000 Z" />
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=        Footer Area Start       	=-->
        <!--=====================================-->
        <footer class="footer-wrap">
            <ul class="footer-top-image">
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="400"><img src="${pageContext.request.contextPath}/static/media/figure/man_5.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="500"><img src="${pageContext.request.contextPath}/static/media/figure/man_6.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="300"><img src="${pageContext.request.contextPath}/static/media/figure/man_4.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="600"><img src="${pageContext.request.contextPath}/static/media/figure/man_7.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="200"><img src="${pageContext.request.contextPath}/static/media/figure/man_3.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="700"><img src="${pageContext.request.contextPath}/static/media/figure/man_8.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="100"><img src="${pageContext.request.contextPath}/static/media/figure/man_2.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500" data-sal-delay="800"><img src="${pageContext.request.contextPath}/static/media/figure/man_9.png" alt="Man"></li>
                <li data-sal="slide-up" data-sal-duration="500"><img src="${pageContext.request.contextPath}/static/media/figure/man_1.png" alt="Man"></li>
            </ul>
            <div class="main-footer">
                <div class="container">
                    <div class="row row-cols-lg-4 row-cols-sm-2 row-cols-1">
                        <div class="col">
                            <div class="footer-box">
                                <div class="footer-logo">
                                    <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo_dark.png" alt="Logo"></a>
                                </div>
                                <p>Dorem ipsum dolor sit amet consec adipisicing elit sed do eiusmod por incidiut labore et loreLorem ipsum kelly amieo dolorey.</p>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Important Links
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/index">首页</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/about-us">About us</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/shop">Shop</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/contact">Contacts</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    社区
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/newsfeed">新闻摘要</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-timeline">配置文件</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-friends">朋友</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-groups">群组</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/forums">论坛</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Followers
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="https://www.facebook.com/">facebook</a></li>
                                        <li><a href="https://twitter.com/">twitter</a></li>
                                        <li><a href="https://www.instagram.com/">instagram</a></li>
                                        <li><a href="https://www.youtube.com/">Youtube</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-copyright">Copy© cirkle 2021. All Rights By <a href="http://www.bootstrapmb.com/">bootstrapmb</a></div>
            </div>
        </footer>



        <!--=====================================-->
        <!--=      Header Search Start          =-->
        <!--=====================================-->
        <div id="header-search" class="header-search">
            <button type="button" class="close">×</button>
            <form class="header-search-form">
                <input type="search" value="" placeholder="Search here..." />
                <button type="submit" class="search-btn">
                    <i class="flaticon-search"></i>
                </button>
            </form>
        </div>
    </div>
    <!-- Jquery Js -->
    <script src="${pageContext.request.contextPath}/static/dependencies/jquery/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/popper.js/js/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/slick-carousel/js/slick.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/bootstrap-validator/js/validator.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/select2/js/select2.min.js"></script>
    <script src="http://www.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>

    <!-- Site Scripts -->
    <script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
</body>

</html>
